<template>
  <div class="schedule-page">
    <div class="page-header">
      <h1 class="page-title">今日课程</h1>
      <p class="page-desc">查看今天的课程安排，避免错过上课时间</p>
    </div>

    <el-card class="filter-card" shadow="hover">
      <el-form :inline="true" :model="filterForm">
        <el-form-item label="学期">
          <el-select v-model="filterForm.semester" placeholder="选择学期" @change="loadSchedule">
            <el-option label="2024春季" value="2024春季" />
            <el-option label="2024秋季" value="2024秋季" />
            <el-option label="2025春季" value="2025春季" />
            <el-option label="2025秋季" value="2025秋季" />
          </el-select>
        </el-form-item>
        <el-form-item label="星期">
          <el-select v-model="selectedDay" placeholder="请选择星期" style="width: 150px">
            <el-option 
              v-for="day in weekDays" 
              :key="day.value" 
              :label="day.label" 
              :value="day.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loadSchedule">
            <el-icon><Refresh /></el-icon>
            刷新
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="schedule-card" shadow="hover" v-loading="loading">
      <div v-if="scheduleData.length === 0" class="empty-state">
        <el-empty description="暂无课程安排" />
      </div>
      <div v-else class="schedule-container">
        <h3 class="schedule-title">{{ getSelectedDayLabel() }}的课程安排</h3>
        <div class="schedule-list">
          <div 
            v-for="period in timePeriods" 
            :key="period.no"
            class="time-period-section"
          >
            <div class="period-header">
              <div class="period-time">
                <el-icon class="period-icon"><Clock /></el-icon>
                <span>第{{ period.no }}节</span>
                <span class="time-range">{{ period.time }}</span>
              </div>
            </div>
            <div class="courses-in-period">
              <template v-if="getCourseByTime(selectedDay, period.no).length > 0">
                <div 
                  v-for="course in getCourseByTime(selectedDay, period.no)" 
                  :key="course.scheduleId"
                  class="course-card"
                  @click="showCourseDetail(course)"
                >
                  <div class="course-name">
                    <el-icon class="course-icon"><Reading /></el-icon>
                    {{ course.courseName }}
                  </div>
                  <div class="course-info">
                    <span class="info-item">
                      <el-icon><School /></el-icon>
                      {{ course.clazzName }}
                    </span>
                    <span class="info-item">
                      <el-icon><Location /></el-icon>
                      {{ course.classroomName }}
                    </span>
                  </div>
                </div>
              </template>
              <div v-else class="no-course">
                <el-icon class="no-course-icon"><MoonNight /></el-icon>
                <span>无课程安排</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 课程详情对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="currentCourse.courseName"
      width="500px"
    >
      <div class="course-detail" v-if="currentCourse.courseName">
        <el-descriptions :column="1" border>
          <el-descriptions-item label="课程名称">
            {{ currentCourse.courseName }}
          </el-descriptions-item>
          <el-descriptions-item label="班级">
            {{ currentCourse.clazzName }}
          </el-descriptions-item>
          <el-descriptions-item label="教室">
            {{ currentCourse.classroomName }}
          </el-descriptions-item>
          <el-descriptions-item label="上课时间">
            星期{{ getDayName(currentCourse.dayOfWeek) }} 第{{ currentCourse.periodNo }}节
          </el-descriptions-item>
          <el-descriptions-item label="课程类型" v-if="currentCourse.courseType">
            {{ currentCourse.courseType }}
          </el-descriptions-item>
          <el-descriptions-item label="学期">
            {{ currentCourse.semester || filterForm.semester }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Refresh, Clock, Reading, School, Location, MoonNight } from '@element-plus/icons-vue'
import { getTeacherSchedule } from '../api/teacherUser'

const loading = ref(false)
const scheduleData = ref([])
const dialogVisible = ref(false)
const currentCourse = ref({})
const filterForm = ref({
  semester: '2024春季'
})
const selectedDay = ref(1) // 默认选择星期一

const user = JSON.parse(localStorage.getItem('user') || '{}')

// 星期定义
const weekDays = [
  { label: '星期一', value: 1 },
  { label: '星期二', value: 2 },
  { label: '星期三', value: 3 },
  { label: '星期四', value: 4 },
  { label: '星期五', value: 5 },
  { label: '星期六', value: 6 },
  { label: '星期日', value: 7 }
]

// 时间段定义
const timePeriods = [
  { no: 1, time: '08:30-09:50' },
  { no: 2, time: '10:05-11:25' },
  { no: 3, time: '12:55-14:25' },
  { no: 4, time: '14:40-16:10' }
]

// 根据星期和节次获取课程
const getCourseByTime = (dayOfWeek, periodNo) => {
  return scheduleData.value.filter(course => 
    course.dayOfWeek === dayOfWeek && course.periodNo === periodNo
  )
}

// 显示课程详情
const showCourseDetail = (course) => {
  currentCourse.value = course
  dialogVisible.value = true
}

// 获取星期名称
const getDayName = (dayOfWeek) => {
  const names = ['', '一', '二', '三', '四', '五', '六', '日']
  return names[dayOfWeek] || dayOfWeek
}

// 获取选中的星期名称
const getSelectedDayLabel = () => {
  const day = weekDays.find(d => d.value === selectedDay.value)
  return day ? day.label : '星期一'
}

const loadSchedule = async () => {
  loading.value = true
  try {
    const teacherId = user.teacherId || user.teId || user.id
    if (!teacherId) {
      ElMessage.error('无法获取教师信息，请重新登录')
      loading.value = false
      return
    }
    
    const response = await getTeacherSchedule(teacherId, filterForm.value.semester)
    console.log('课表数据:', response)
    
    if (response.code === 200) {
      scheduleData.value = response.data || []
      if (scheduleData.value.length === 0) {
        ElMessage.info('当前学期暂无课程安排')
      }
    } else {
      ElMessage.error(response.msg || '获取课表失败')
    }
  } catch (error) {
    console.error('获取课表失败:', error)
    ElMessage.error('获取课表失败: ' + (error.message || '未知错误'))
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  loadSchedule()
})
</script>

<style scoped>
.schedule-page {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 16px;
}

.page-header {
  margin-bottom: 24px;
}

.page-title {
  font-size: 28px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 8px;
}

.page-desc {
  font-size: 14px;
  color: #6c757d;
}

.filter-card {
  margin-bottom: 20px;
  border-radius: 12px;
}

.schedule-card {
  border-radius: 12px;
  min-height: 500px;
}

.empty-state {
  padding: 60px 0;
}

.schedule-container {
  padding: 0;
}

.schedule-title {
  font-size: 20px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid #e9ecef;
  text-align: center;
}

.schedule-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.time-period-section {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e9ecef;
  transition: all 0.3s ease;
}

.time-period-section:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.period-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 16px 20px;
}

.period-time {
  display: flex;
  align-items: center;
  gap: 12px;
  color: white;
  font-size: 16px;
  font-weight: 600;
}

.period-icon {
  font-size: 20px;
}

.time-range {
  margin-left: auto;
  font-size: 14px;
  font-weight: 500;
  opacity: 0.95;
}

.courses-in-period {
  background: white;
  padding: 16px;
}

.course-card {
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
  border-radius: 10px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  margin-bottom: 12px;
}

.course-card:last-child {
  margin-bottom: 0;
}

.course-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.course-name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 12px;
}

.course-icon {
  font-size: 22px;
  color: #667eea;
}

.course-info {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #495057;
  font-weight: 500;
}

.info-item .el-icon {
  font-size: 16px;
  color: #667eea;
}

.no-course {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 20px;
  color: #909399;
  font-size: 15px;
}

.no-course-icon {
  font-size: 24px;
}

.course-detail {
  padding: 10px 0;
}

.el-form--inline .el-form-item {
  margin-right: 16px;
}

@media (max-width: 768px) {
  .schedule-page {
    padding: 0 12px;
  }
  
  .page-title {
    font-size: 24px;
  }
  
  .page-desc {
    font-size: 13px;
  }
  
  .filter-card :deep(.el-form) {
    display: flex;
    flex-direction: column;
  }
  
  .filter-card :deep(.el-form-item) {
    width: 100%;
    margin-right: 0;
  }
  
  .schedule-title {
    font-size: 18px;
  }
  
  .period-header {
    padding: 12px 16px;
  }
  
  .period-time {
    font-size: 14px;
  }
  
  .time-range {
    font-size: 13px;
  }
  
  .course-card {
    padding: 16px;
  }
  
  .course-name {
    font-size: 16px;
  }
  
  .course-info {
    gap: 16px;
  }
  
  .info-item {
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .schedule-page {
    padding: 0 8px;
  }
  
  .page-title {
    font-size: 20px;
  }
  
  .schedule-list {
    gap: 16px;
  }
  
  .time-period-section {
    border-radius: 8px;
  }
  
  .period-header {
    padding: 10px 12px;
  }
  
  .period-time {
    font-size: 13px;
  }
  
  .period-icon {
    font-size: 16px;
  }
  
  .courses-in-period {
    padding: 12px;
  }
  
  .course-card {
    padding: 14px;
    border-radius: 8px;
  }
  
  .course-name {
    font-size: 15px;
    margin-bottom: 10px;
  }
  
  .course-icon {
    font-size: 18px;
  }
  
  .course-info {
    flex-direction: column;
    gap: 8px;
  }
  
  .info-item {
    font-size: 12px;
  }
}
</style>

